<template>
  <div>
    <el-drawer
      title="数据配置"
      :visible.sync="configVisible"
      direction="rtl"
      size="60%"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      :before-close="beforeCloseDrawer"
      :wrapperClosable="false"
      @open="handleDrawerOpen"
    >
      <div style="margin-left: 20px">
        <div style="height: 82vh; overflow-y: scroll">
          <div>
            <el-switch
              v-model="value1"
              style="margin-bottom: 10px;"
              active-text="选择服务包"
              inactive-text="选择服务实例"
              @change="resetSelection"
              :disabled="hasConfirmed">
            </el-switch>
            <el-row>
              <el-col :span="8">
                <span> 服务标识： </span>
                <el-input
                  placeholder="请输入服务标识"
                  style="width: 250px"
                  v-model="appName"
                  disabled
                  size="mini"
                >
                </el-input>
              </el-col>
              <el-col :span="10" v-if="value1">
                部署版本：
                <el-select
                  v-model="appVersion"
                  size="mini"
                  style="width: 250px"
                  @focus="getAppInfoVersionList(appName)"
                  @change="getOneServiceDeployInfo()"
                >
                  <!--                         :disabled="appVersion !== ''"-->
                  <el-option
                    v-for="item in appInfoVersionList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div v-if="(appVersion !== '') && value1 && gvStoreYamlDeployVo">
            <div>
              <div class="displayLayout">
                <el-row>
                  <el-col :span="8">
                    <div>
                      <span> 服务镜像： </span>
                      <el-input
                        placeholder="请输入服务镜像"
                        style="width: 250px"
                        v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.image"
                        disabled
                        size="mini"
                      >
                      </el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <span> 服务描述： </span>
                      <el-input
                        placeholder="请输入服务描述"
                        clearable
                        style="width: 250px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployBaseInfo.description
                        "
                        size="mini"
                      >
                      </el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                  <span class="spanStyle"> 分区选择： </span>
                  <el-select v-model="gvStoreYamlDeployVo.partitionZhname" placeholder="请选择服务版本" style="width: 250px"
                    @change="handlePartitionChange" size="mini">
                    <el-option v-for="item in partitionOptions" :key="item.id" :label="item.partitionZhname"
                      :value="item.partitionZhname" :data-id="item.id"></el-option>
                  </el-select>
                  <el-tooltip class="item" effect="dark" content="服务部署至指定集群分区节点，非必选项" placement="bottom-start"><i
                      class="el-icon-question"
                      style="font-size: 25px; color: slategray; margin-left: 8px"></i></el-tooltip>
                </div>
                    <!-- <div>
                      <span> 分区选择： </span>
                      <el-input
                        placeholder="请输入服务描述"
                        clearable
                        style="width: 250px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployBaseInfo.description
                        "
                        size="mini"
                      >
                      </el-input>
                    </div> -->
                  </el-col>
                </el-row>
              </div>
              <div class="displayLayout">
                <el-row>
                  <el-col :span="8">
                    <div>
                      <span> 部署名称： </span>
                      <el-input
                        placeholder="请输入部署名称"
                        clearable
                        style="width: 250px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName
                        "
                        @blur="checkDeployName"
                        size="mini"
                      >
                      </el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <span> 副本数量： </span>
                      <el-input-number
                        placeholder="请输入服本数量"
                        type="number"
                        style="width: 250px"
                        v-model="
                          gvStoreYamlDeployVo.yamlDeployBaseInfo.replicas
                        "
                        :min="1"
                        :max="100"
                        :step="1"
                        size="mini"
                      >
                      </el-input-number>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div style="float: right; margin-top: 10px">
              <el-switch
                v-model="expandSwitch"
                active-color="#13ce66"
                inactive-color="#eeeeee"
                active-text="展开"
                @change="expandAll"
              >
              </el-switch>
            </div>
            <div style="margin-top: 40px">
              <div>
                <el-collapse v-model="activeName" :accordion="accordionType">
                  <el-collapse-item title="端口设置" name="1">
                    <div
                      v-for="(
                        portInfo, index
                      ) in gvStoreYamlDeployVo.yamlDeployPortInfo"
                      :key="portInfo.port"
                      style="margin-bottom: 5px"
                    >
                      <el-row>
                        <el-col :span="4">
                          <span> 协议： </span>
                          <el-input
                            :disabled="true"
                            style="width: 80px"
                            v-model="portInfo.protocol"
                            size="mini"
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="4">
                          <span> 内部端口： </span>
                          <el-input
                            style="width: 80px"
                            v-model="portInfo.port"
                            disabled
                            size="mini"
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="6">
                          <span> 暴露端口： </span>
                          <el-input
                            style="width: 80px"
                            v-show="!portInfo.fixed"
                            disabled
                            size="mini"
                            placeholder="随机端口"
                          >
                          </el-input>
                          <el-input
                            style="width: 80px"
                            v-model="portInfo.port"
                            v-show="portInfo.fixed"
                            disabled
                            size="mini"
                          >
                          </el-input>
                          <el-checkbox
                            v-model="portInfo.fixed"
                            style="margin-left: 10px"
                          >
                            <span> 容器一致 </span>
                          </el-checkbox>
                        </el-col>
                        <el-col :span="3">
                          <el-switch
                            active-text="开启域名"
                            v-model="portInfo.enableDns"
                          >
                          </el-switch>
                        </el-col>
                        <el-col :span="5" v-show="portInfo.enableDns">
                          <span> DNS： </span>
                          <el-input
                            style="width: 120px"
                            v-model="portInfo.dns"
                            size="mini"
                            @blur="checkDnsValue(portInfo.dns)"
                          >
                          </el-input>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="资源配置" name="2">
                    <div>
                      <el-row>
                        <el-col :span="9">
                          <div style="margin-bottom: 5px">
                            <span> CPU预留： </span>
                            <el-input
                              style="width: 250px"
                              v-model="
                                gvStoreYamlDeployVo.yamlDeployResourceInfo
                                  .cpuRequest
                              "
                              controls-position="right"
                              :min="0.1"
                              :max="256"
                              :step="0.1"
                              type="number"
                              size="mini"
                              @blur="checkCpu"
                            >
                              <template v-slot:append>核</template>
                            </el-input>
                          </div>
                          <div
                            v-show="
                              gvStoreYamlDeployVo.yamlDeployResourceInfo
                                .enableLimit
                            "
                          >
                            <span> CPU限制： </span>
                            <el-input
                              style="width: 250px"
                              v-model="
                                gvStoreYamlDeployVo.yamlDeployResourceInfo
                                  .cpuLimit
                              "
                              controls-position="right"
                              :min="0.1"
                              :max="256"
                              :step="0.1"
                              type="number"
                              size="mini"
                              @blur="checkCpu"
                            >
                              <template v-slot:append>核</template>
                            </el-input>
                          </div>
                          <div>
                            <span> CPU可用： </span>
                            <span>{{ remainResourceInfo.cpu }}核</span>
                          </div>
                        </el-col>
                        <el-col :span="9">
                          <div style="margin-bottom: 5px">
                            <span> 内存预留： </span>
                            <el-input
                              style="width: 250px"
                              v-model="
                                gvStoreYamlDeployVo.yamlDeployResourceInfo
                                  .memRequest
                              "
                              controls-position="right"
                              :min="4"
                              :max="16384"
                              :step="256"
                              type="number"
                              size="mini"
                              @blur="checkMemory"
                            >
                              <template v-slot:append>MB</template>
                            </el-input>
                          </div>
                          <div
                            v-show="
                              gvStoreYamlDeployVo.yamlDeployResourceInfo
                                .enableLimit
                            "
                          >
                            <span> 内存限制： </span>
                            <el-input
                              style="width: 250px"
                              v-model="
                                gvStoreYamlDeployVo.yamlDeployResourceInfo
                                  .memLimit
                              "
                              controls-position="right"
                              :min="4"
                              :max="16384"
                              :step="256"
                              type="number"
                              size="mini"
                              @blur="checkMemory"
                            >
                              <template v-slot:append>MB</template>
                            </el-input>
                          </div>
                          <div>
                            <span> 内存可用： </span>
                            <span>{{ remainResourceInfo.memory }}MB</span>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <el-switch
                            v-model="
                              gvStoreYamlDeployVo.yamlDeployResourceInfo
                                .enableLimit
                            "
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-text="resourceLimitText"
                            @change="changeResourceLimitStatus"
                          >
                          </el-switch>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="自动伸缩" name="3">
                    <!--                    <template slot="title">-->
                    <!--                      自动伸缩-->
                    <!--                      <el-switch-->
                    <!--                        v-model="gvStoreYamlDeployVo.enableHpa"-->
                    <!--                        active-color="#13ce66"-->
                    <!--                        inactive-color="#989898"-->
                    <!--                        style="margin-left: 20px"-->
                    <!--                      >-->
                    <!--                      </el-switch>-->
                    <!--                    </template>-->
                    <div>
                      <el-switch
                        v-model="gvStoreYamlDeployVo.enableHpa"
                        active-color="#13ce66"
                        inactive-color="#989898"
                        :active-text="openHpaText"
                        @change="changeHpaStatus"
                      >
                      </el-switch>
                    </div>
                    <div v-if="gvStoreYamlDeployVo.enableHpa" style="margin-top: 4px;">
                      <el-row style="margin-bottom: 5px">
                        <el-col :span="10">
                          <span class="spanStyle"> 触发条件： </span>
                          <el-select
                            v-model="metricsInfo.type"
                            placeholder="请选择"
                            style="width: 90px; margin-right: 10px"
                            size="mini"
                          >
                            <el-option
                              v-for="selectMetrics in selectMetricsList"
                              :key="selectMetrics.value"
                              :label="selectMetrics.label"
                              :value="selectMetrics.value"
                            >
                            </el-option>
                          </el-select>
                          <span class="spanStyle"> 使用量： </span>
                          <el-input-number
                            style="width: 90px"
                            v-model="metricsInfo.usage"
                            controls-position="right"
                            :min="1"
                            :max="99"
                            :step="1"
                            size="mini"
                          >
                          </el-input-number>
                          %
                          <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-plus"
                            circle
                            style="margin-left: 10px"
                            @click="addHapInfoMetrics"
                            class="el-button-primary-style"
                          ></el-button>
                        </el-col>
                        <el-col
                          :span="6"
                          v-for="(mt, index) in gvStoreYamlDeployVo
                            .yamlDeployHpaInfo.metrics"
                          :key="mt.type"
                        >
                          <span class="spanStyle">
                            类型：{{ mt.type }} - 值：{{ mt.usage }} %
                            <el-button
                              type="primary"
                              size="mini"
                              icon="el-icon-delete"
                              circle
                              style="margin-left: 10px"
                              @click="deleteMetrics(index)"
                              class="el-button-primary-style"
                            ></el-button>
                          </span>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="15">
                          <span class="spanStyle"> 伸缩范围： </span>
                          <el-input-number
                            style="width: 90px"
                            v-model="
                              gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas
                            "
                            controls-position="right"
                            :min="1"
                            :max="99"
                            :step="1"
                            size="mini"
                            @blur="checkReplicas"
                          >
                          </el-input-number>
                          ～
                          <el-input-number
                            style="width: 90px"
                            v-model="
                              gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas
                            "
                            controls-position="right"
                            :min="1"
                            :max="99"
                            :step="1"
                            size="mini"
                            @blur="checkReplicas"
                          >
                          </el-input-number>
                          <span style="margin-left: 10px">注：1-99之间</span>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item
                    title="配置挂载"
                    name="4"
                    v-show="
                      gvStoreYamlDeployVo.yamlDeployConfigInfo.length !== 0
                    "
                  >
                    <div
                      v-for="(
                        deployConfigInfo, index
                      ) in gvStoreYamlDeployVo.yamlDeployConfigInfo"
                      :key="index"
                      style="margin-bottom: 5px"
                    >
                      <el-row>
                        <el-col :span="6">
                          <span> 文件名称： </span>
                          <el-input
                            style="width: 150px"
                            v-model="deployConfigInfo.mountFilename"
                            size="mini"
                            disabled
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="11">
                          <span> 挂载路径： </span>
                          <el-input
                            style="width: 350px"
                            v-model="deployConfigInfo.mountPath"
                            disabled
                            size="mini"
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="3">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="
                              getFileDataById(
                                gvStoreYamlDeployVo.yamlDeployBaseInfo.appId,
                                deployConfigInfo.mountPath,
                                deployConfigInfo.mountFiledata
                              )
                            "
                            class="el-button-primary-style"
                          >
                            编 辑
                          </el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item
                    title="存储挂载"
                    name="5"
                    v-show="
                      gvStoreYamlDeployVo.yamlDeployVolumeInfo.length !== 0
                    "
                  >
                    <div
                      v-for="(
                        deployVolumeInfo, index
                      ) in gvStoreYamlDeployVo.yamlDeployVolumeInfo"
                      :key="index"
                      style="margin-bottom: 5px"
                    >
                      <el-row>
                        <el-col :span="3">
                          <el-switch
                            v-model="deployVolumeInfo.autoCreate"
                            active-color="#13ce66"
                            inactive-color="#989898"
                            :active-text="
                              deployVolumeInfo.autoCreate
                                ? '自动创建'
                                : '选择已有'
                            "
                          >
                          </el-switch>
                        </el-col>
                        <el-col :span="8">
                          <span> 挂载路径： </span>
                          <el-input
                            style="width: 250px"
                            v-model="deployVolumeInfo.mountPath"
                            size="mini"
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="6" v-show="deployVolumeInfo.autoCreate">
                          <span> 挂载模式： </span>
                          <el-select
                            v-model="deployVolumeInfo.accessMode"
                            placeholder="请选择挂载模式"
                            size="mini"
                          >
                            <el-option
                              v-for="item in volumeAccessMode"
                              :key="item"
                              :label="item"
                              :value="item"
                            >
                            </el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="6" v-show="!deployVolumeInfo.autoCreate">
                          <span> 已有挂载： </span>
                          <el-select
                            v-model="deployVolumeInfo.pvcId"
                            placeholder="请选择已存在的挂载卷"
                            size="mini"
                          >
                            <el-option
                              v-for="item in existPvcList"
                              :key="item.id"
                              :label="item.pvcName"
                              :value="item.id"
                            >
                            </el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="6" v-show="deployVolumeInfo.autoCreate">
                          <span> 挂载容量： </span>
                          <el-input
                            style="width: 140px"
                            v-model="deployVolumeInfo.capacity"
                            controls-position="right"
                            :min="0"
                            :max="1024"
                            :step="1"
                            type="number"
                            size="mini"
                          >
                            <template v-slot:append>GB</template>
                          </el-input>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="环境变量" name="6">
                    <el-row :gutter="20">
                      <el-col :span="6">
                        <div style="margin-bottom: 5px">KEY</div>
                      </el-col>
                      <el-col :span="6">
                        <div style="margin-bottom: 5px">VALUE</div>
                      </el-col>
                      <el-col :span="11">
                        <div style="float: right">
                          <el-button
                            type="primary"
                            round
                            size="mini"
                            @click="addNewEnv"
                            class="el-button-primary-style"
                          >
                            <i class="el-icon-plus"></i>新增
                          </el-button>
                        </div>
                      </el-col>
                    </el-row>
                    <div
                      v-for="(
                        envInfo, index
                      ) in gvStoreYamlDeployVo.yamlDeployEnvInfo"
                      :key="index"
                    >
                      <el-row :gutter="20">
                        <el-col :span="6">
                          <div style="margin-bottom: 5px">
                            <el-input
                              v-model="envInfo.key"
                              :disabled="index < gvEnvLength"
                              size="mini"
                              @blur="judgeReg(index)"
                            >
                            </el-input>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div style="margin-bottom: 5px">
                            <el-input
                              v-model="envInfo.value"
                              size="mini"
                              @blur="judgeReg(index)"
                            >
                            </el-input>
                          </div>
                        </el-col>
                        <el-col :span="3">
                          <el-button
                            type="primary"
                            class="el-button-primary-style"
                            size="small"
                            @click="deleteEnvForEnvList(index)"
                            v-show="index >= gvEnvLength"
                          >删除
                          </el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
          <div v-if="!value1">
            <el-table
              :data="tableData"
              style="width: 100%; height: 38vh;"
              @row-click="tableSelectionChange"
            >
              <el-table-column
                align="center"
                width="35"
              >
                <template slot-scope="scope">
                  <el-radio class="radio" v-model="currentSelectedId" :label="scope.row.id">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <!--              <el-table-column prop="appZhname" label="服务名称" width="170">-->
              <!--              </el-table-column>-->
              <el-table-column label="部署名称" width="170">
                <template slot-scope="scope">
                  <el-tooltip
                    effect="dark"
                    :content="scope.row.deployName"
                    placement="bottom-start"
                    popper-class="tooltipClass"
                    :disabled="isShowTooltip"
                  >
                    <div class="descSpan" @mouseover="onMouseOver($event)">
                      {{ scope.row.deployName }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="appVersion" label="服务版本" width="200">
              </el-table-column>
              <el-table-column
                prop="host"
                label="地址"
                width="200"
              ></el-table-column>
              <el-table-column label="服务描述">
                <template slot-scope="scope">
                  <el-tooltip
                    effect="dark"
                    :content="scope.row.appDescription"
                    placement="bottom-start"
                    popper-class="tooltipClass"
                    :disabled="isShowTooltip"
                  >
                    <div class="descSpan" @mouseover="onMouseOver($event)">
                      {{ scope.row.appDescription }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="190">
              </el-table-column>
              <!-- <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                  <el-button
                    @click="serviceInstanceDetail(scope.row)"
                    type="text"
                    style="margin-right: 10px; padding: 0"
                  >
                    详情
                  </el-button>
                  <el-dropdown
                    trigger="click"
                    @command="
                      (command) => {
                        handleCommand(command, scope.row);
                      }
                    "
                    :hide-on-click="false"
                  >
                    <el-button type="text" style="padding: 0">
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="configuration"
                      >配置
                      </el-dropdown-item>
                      <el-dropdown-item command="yaml">查看yaml</el-dropdown-item>
                      <el-dropdown-item command="update">升级</el-dropdown-item>
                      <el-dropdown-item command="rollback"
                      >回滚
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column> -->
            </el-table>

          </div>
          <!-- 如果有内容进行展示，没有内容时不展示table -->
          <!-- if后加 && 返回的数据不为空 -->
          <div v-if="!value1 && tableDataOut.length">
            <el-table
              :data="tableDataOut"
              style="width: 100%; height: 37vh;"
              @row-click="tableSelectionOutChange"
            >
              <el-table-column
                align="center"
                width="35"
              >
                <template slot-scope="scope">
                  <el-radio v-if="scope.row" class="radio" v-model="currentSelectedId" :label="scope.row.serviceId">
                    &nbsp;
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="serviceName" label="服务名称" width="170">
              </el-table-column>
              <el-table-column
                prop="serviceInterface"
                label="服务标识"
                width="200"
              />
              <el-table-column
                prop="serviceIp"
                label="服务地址"
                width="200"
              />
              <el-table-column label="描述">
                <template slot-scope="scope">
                  <el-tooltip
                    v-if="scope.row"
                    effect="dark"
                    :content="scope.row.serviceDescription"
                    placement="bottom-start"
                    popper-class="tooltipClass"
                    :disabled="isShowTooltip"
                  >
                    <div
                      class="descSpan"
                      style="text-align: left"
                      @mouseover="onMouseOver($event)"
                    >
                      {{ scope.row.serviceDescription }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="190"/>
            </el-table>
          </div>

        </div>
        <div
          style="margin-top: 10px; float: right; margin-right: 30px"
          v-if="appVersion !== '' && value2 === true"
        >
          <el-button
            type="primary"
            @click="saveServiceDeployInfo"
            class="el-button-primary-style"
          >确 定
          </el-button>
          <el-button
            @click="beforeCloseDrawer"
            type="primary"
            class="el-button-primary-style"
          >取 消
          </el-button>
        </div>
        <div
          style="margin-top: 10px; float: right; margin-right: 30px"
          v-if="currentSelectedId && value2 === false"
        >
          <el-button
            type="primary"
            @click="saveServiceDemoOrOutServiceInfo"
            class="el-button-primary-style"
          >确 定
          </el-button>
          <el-button
            @click="beforeCloseDrawer"
            type="primary"
            class="el-button-primary-style"
          >取 消
          </el-button>
        </div>
        <el-dialog
          title="查看并编辑配置文件"
          :visible.sync="editConfigFileDialog"
          width="60%"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :destroy-on-close="true"
          append-to-body
        >
          <div>
            <el-input
              type="textarea"
              v-model="configFileContext"
              :rows="24"
            ></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              size="small"
              @click="saveConfigFileContext"
              class="el-button-primary-style"
            >确 定
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="closeEditConfigFileDialog"
              class="el-button-primary-style"
            >取 消
            </el-button>
          </span>
        </el-dialog>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {getTenantId} from "@/utils/tenantId";

  export default {
    name: "ServiceGroupDeployDrawer",
    props: ["appName", "appInterface"],
    data() {
      return {
        value1: true,
        value2: true, // 显示两个确定按钮，如果是true，显示服务包的，如果是false，显示服务实例和外部服务的
        configVisible: false,
        appInfoVersionList: [],
        appVersion: "",
        serviceName: "",
        tmpPage: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
          tenantId: "",
        },
        tmpPageOut: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
        },
        tableData: [],
        tableDataOut: [],
        isShowTooltip: false,
        singleSelection: "",
        singleSelectionOut: "",
        currentSelectedId: null,
        checkList: [],
        hasConfirmed: false,
        openHpaText: "关闭自动伸缩",
        gvStoreYamlDeployVo: {
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1,
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0,
          },
          enableHpa: false,
          yamlDeployHpaInfo: {
            maxReplicas: 10,
            minReplicas: 0,
            metrics: [],
          },
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: [],
          livenessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
          readinessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
          partitionZhname: "",
        partitionId: "",
        },
        serviceDeployOrOutServiceInfo: {
          serviceDeployInfo: {
            id: "",
            appId: "",
            appZhname: "",
            appName: "",
            appVersion: "",
            deployName: "",
            deployNamespace: "",
            deployStatus: "",
            tenantId: "",
          },
          outServiceInfo: {
            serviceId: "",
            serviceInterface: "",
            serviceIp: "",
            serviceName: "",
            serviceZhname: ""
          },
          id: "",
          deployId: '',
          appName: '',
          appVersion: '',
          depends: [],
          useAppliedDeploy: false,
          yamlDeploy: {}
        },
        detailType: "",
        activeName: "0",
        accordionType: true,
        expandSwitch: false,
        resourceLimitText: "开启资源限制",
        metricsInfo: {
          type: "",
          usage: 0,
        },
        selectMetricsList: [
          {
            value: "cpu",
            label: "CPU",
          },
          {
            value: "memory",
            label: "内存",
          },
        ],
        editConfigFileDialog: false,
        volumeAccessMode: ["ReadWriteOnce", "ReadOnlyMany", "ReadWriteMany"],
        existPvcList: [],
        gvEnvLength: 0,
        configFileContext: "",
        remainResourceInfo: {
          cpu: 0,
          memory: 0,
        },
        partitionOptions: [], // 存储分区数据
      };
    },
    created() {
    this.fetchPartitionOptions();
  },
    methods: {
         // 获取分区信息
    async fetchPartitionOptions() {
      await this.$appManageApi.getPartitionOptions().then((res) => {
        if (res && res.code === 200) {
          // 确保 id 是字符串格式
          this.partitionOptions = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 处理分区选择
    handlePartitionChange(selectedZhname) {
      const selectedPartition = this.partitionOptions.find(
        (item) => item.partitionZhname === selectedZhname
      );

      if (selectedPartition) {
        this.gvStoreYamlDeployVo.partitionId = selectedPartition.id;
        this.gvStoreYamlDeployVo.partitionZhname = selectedPartition.partitionZhname;
      }
    },
      changeHpaStatus(status) {
        if (status) {
          this.openHpaText = "开启自动伸缩";
        } else {
          this.openHpaText = "关闭自动伸缩";
        }
      },
      expandAll() {
        if (this.expandSwitch) {
          this.accordionType = false;
          this.activeName = ["1", "2", "3", "4", "5", "6"];
        } else {
          this.accordionType = true;
          this.activeName = "0";
        }
      },
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      getAppInfoVersionList(appName) {
        this.$appStoreApi.appNameVersionList(appName).then((res) => {
          if (res && res.code === 200) {
            this.appInfoVersionList = res.data;
          }
        });
      },
      getAllServiceInstance(name) {
        setTimeout(() => {
          this.tmpPage.tenantId = getTenantId();
          if (this.tmpPage.tenantId === undefined) {
            this.$router.push("/");
            this.$message.warning("数据出现问题，请稍后再试");
          } else {
            this.$appManageApi.listKubeDeploy(this.tmpPage).then((res) => {
              if (res && res.code === 200) {
                const filteredData = res.data.records.filter(item => item.appName === name).sort(
                  (ele1, ele2) => new Date(ele2.updateTime).getTime() - new Date(ele1.updateTime).getTime()
                );
                this.tableData = filteredData;
                // this.page.total = res.data.total;
              }
            });
          }
        }, 500);
      },
      tableSelectionChange(row) {
        this.currentSelectedId = row.id
        this.detailType = "serviceDeploy"
        this.checkList = row
      },
      tableSelectionOutChange(row) {
        this.currentSelectedId = row.serviceId
        // this.currentSelectedId = row.id
        this.detailType = "outService"
        this.checkList = row
      },
      getAllOutServiceList(name) {
        this.serviceName = name
        this.$appStoreApi
          .getOutServiceByName(this.serviceName)
          .then((res) => {
            if (res.data && res.code === 200) {
              this.tableDataOut = res.data;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      },
      getOneServiceDeployInfo() {
        this.$appStoreApi
          .getDeployConfig({appName: this.appName, appVersion: this.appVersion})
          .then((res) => {
            if (res && res.code === 200) {
              this.gvStoreYamlDeployVo = res.data;
              this.gvEnvLength = res.data.yamlDeployEnvInfo.length;
              if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics === null) {
                this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics = [];
              }
            }
          });
      },
      resetSelection() {
        this.value2 = this.value1
        console.log("tableDataOut", this.tableDataOut);

      },
      checkDeployName() {
        const regex = /^[a-z][a-z0-9]{5,63}$/; // 字母开头，后面跟着5位数字或字母
        // const regex = /^[a-zA-Z][a-zA-Z0-9]{5,}$/; // 字母开头，后面跟着5位数字或字母
        const deployName = this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName;
        if (!regex.test(deployName)) {
          // 如果不符合正则表达式的条件，弹出错误信息
          this.$message.error(
            "部署名称必须为6-64位数字或字母组成，并且以字母开头"
          );
          return false;
        } else if (deployName === "") {
          this.$message.error("部署名称不能为空，请修改...");
          return false;
        }
        this.$appManageApi
          .checkDeployName(this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName)
          .then((res) => {
            if (res && res.code === 200) {
              if (res.data) {
                this.$message.error("部署名称已存在，请修改...");
              }
            }
          });
      },
      changeResourceLimitStatus(status) {
        if (status) {
          this.resourceLimitText = "开启资源限制";
        } else {
          this.resourceLimitText = "关闭资源限制";
        }
      },
      addHapInfoMetrics() {
        if (this.metricsInfo.type === "" || this.metricsInfo.usage === 0) {
          this.$message.warning("请先选择数据，并确保使用量不为0");
          return;
        }
        const existingIndex =
          this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.findIndex(
            (item) => item.type === this.metricsInfo.type
          );
        if (existingIndex !== -1) {
          // 如果已存在相同的 key，则更新对应 value
          this.$set(
            this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics,
            existingIndex,
            {
              ...this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics[
                existingIndex
                ],
              ...this.metricsInfo,
            }
          );
        } else {
          // 如果不存在相同的 key，则添加新的数据
          this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.push({
            ...this.metricsInfo,
          });
        }
        this.metricsInfo = {
          type: "",
          usage: 0,
        };
      },
      deleteEnvForEnvList(index) {
        this.gvStoreYamlDeployVo.yamlDeployEnvInfo.splice(index, 1);
      },
      judgeReg(index) {
        const keyPattern = /^[a-zA-Z][a-zA-Z0-9_]{1,64}$/;
        const labelPattern = /^[a-zA-Z0-9_./%:; -@]{1,64}$/;
        if (
          !keyPattern.test(
            this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].key
          ) &&
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].key !== ""
        ) {
          this.$message.error(
            "环境变量中只能包含字母数字，以字母开头且长度不超过64位"
          );
          return false;
        }
        if (
          !labelPattern.test(
            this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value
          ) &&
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value !== ""
        ) {
          this.$message.error(
            "环境变量包含字母、数字、.、_、-、/等，且长度不超过64位"
          );
          return false;
        }
        this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value =
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo[index].value.trim();
        return true;
      },
      deleteMetrics(index) {
        this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.splice(index, 1);
      },
      getFileDataById(id, mountFilePath, mountFiledata) {
        this.editConfigFileDialog = true;
        this.mountPath = mountFilePath;
        if (mountFiledata === "") {
          this.$appStoreApi
            .getFileData({id: id, mountFilepath: mountFilePath})
            .then((res) => {
              if (res && res.code === 200) {
                this.configFileContext = res.data;
                this.mountPath = mountFilePath;
              }
            });
        } else {
          this.configFileContext = mountFiledata;
        }
      },
      addNewEnv() {
        let filter = this.gvStoreYamlDeployVo.yamlDeployEnvInfo.filter(
          (ele) => ele.value === "" || ele.key === ""
        );
        if (filter.length > 0) {
          this.$message.warning("请先将空数据填写完整");
        } else {
          this.gvStoreYamlDeployVo.yamlDeployEnvInfo.push({
            key: "",
            value: "",
          });
        }
      },
      saveConfigFileContext() {
        this.gvStoreYamlDeployVo.yamlDeployConfigInfo.forEach((ele) => {
          if (ele.mountPath === this.mountPath) {
            ele.mountFiledata = this.configFileContext;
          }
        });
        this.editConfigFileDialog = false;
      },
      closeEditConfigFileDialog() {
        this.editConfigFileDialog = false;
      },
      beforeCloseDrawer() {
        if (!this.hasConfirmed) {
          this.resetSelection()
        }
        this.gvStoreYamlDeployVo = {
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1,
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0,
          },
          enableHpa: false,
          yamlDeployHpaInfo: {
            maxReplicas: 10,
            minReplicas: 0,
            metrics: [],
          },
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: [],
        };
        this.configVisible = false;
      },
      getExistPvcList() {
        this.$storagePvcApi.listAllPvc().then((res) => {
          if (res && res.code === 200) {
            this.existPvcList = res.data;
          }
        });
      },
      async saveServiceDeployInfo() {
        if (this.appVersion === "") {
          this.$message.warning("请先选择该服务需要进行部署的版本或服务实例...");
          return;
        }
        for (
          let i = 0;
          i < this.gvStoreYamlDeployVo.yamlDeployEnvInfo.length;
          i++
        ) {
          let b = this.judgeReg(i);
          if (!b) {
            return;
          }
        }
        for (let i = 0; i < this.gvStoreYamlDeployVo.yamlDeployPortInfo.length; i++) {
          const portInfo = this.gvStoreYamlDeployVo.yamlDeployPortInfo[i];
          if (portInfo.enableDns) {
            if (portInfo.dns === "") {
              this.$message.error(`开启域名后，端口 ${portInfo.port} 的域名不能为空，请修改...`);
              return;
            }
            let flag1 = false;
            this.$appManageApi.checkDns(portInfo.dns).then((res) => {
              if (res && res.code === 200) {
                if (res.data) {
                  this.$message.error(`端口 ${portInfo.port} 域名已存在，请修改...`);
                  flag1 = true;
                }
              }
            });
            if (flag1) {
              return;
            }
          }
        }
        const regex = /^[a-z][a-z0-9]{5,63}$/; // 字母开头，后面跟着5位数字或字母
        // const regex = /^[a-zA-Z][a-zA-Z0-9]{5,}$/; // 字母开头，后面跟着5位数字或字母
        const deployName = this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName;
        if (!regex.test(deployName)) {
          // 如果不符合正则表达式的条件，弹出错误信息
          this.$message.error(
            "部署名称必须为6-64位数字或字母组成，并且以字母开头"
          );
          return;
        } else if (deployName === "") {
          this.$message.error("部署名称不能为空，请修改...");
          return;
        }
        let flag = false;
        await this.$appManageApi
          .checkDeployName(this.gvStoreYamlDeployVo.yamlDeployBaseInfo.deployName)
          .then((res) => {
            if (res && res.code === 200) {
              if (res.data) {
                this.$message.error("部署名称已存在，请修改...");
                flag = true;
              }
            }
          });
        if (flag) {
          return;
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
            return;
          }
        }
        if (this.gvStoreYamlDeployVo.enableHpa) {
          if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.metrics.length === 0) {
            this.$message.error("自动伸缩开启后，必须添加触发条件");
            return;
          }
          if (!this.checkReplicas()) {
            return;
          }
        }
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("内存资源值不能超过可用资源");
            return;
          }
        }
        console.log("this.gvStoreYamlDeployVo", this.gvStoreYamlDeployVo);
        this.$emit(
          "addServiceGroupOneServiceToGvStoreGroupDeployVo",
          this.gvStoreYamlDeployVo
        );
        this.configVisible = false;
        this.value1 = true
        // this.hasConfirmed = true; // 设置已确认状态
      },
      checkDnsValue(dns) {
        // const regex = /^[a-z][a-z0-9]{5,63}$/; // 字母开头，后面跟着5位数字或字母
        // // const regex = /^[a-zA-Z][a-zA-Z0-9]{5,}$/; // 字母开头，后面跟着5位数字或字母
        // if (!regex.test(dns)) {
        //   // 如果不符合正则表达式的条件，弹出错误信息
        //   this.$message.error(
        //     "域名必须为6-64位数字或字母组成，并且以字母开头"
        //   );
        //   return;
        // } else
        if (dns === "") {
          this.$message.error("域名不能为空，请修改...");
          return;
        }
        this.$appManageApi.checkDns(dns).then((res) => {
          if (res && res.code === 200) {
            if (res.data) {
              this.$message.error("域名已存在，请修改...");
            }
          }
        });
      },
      async saveServiceDemoOrOutServiceInfo() {
        if (this.currentSelectedId === null) {
          this.$message.warning("请先选择该服务需要进行部署的服务实例或外部服务...");
          return;
        }
        // 加个判断。detailType不同，checkList的值赋给外部服务信息或服务实例信息
        // if(this.detailType === "serviceDeploy"){
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.id = this.checkList.id
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.appId = this.checkList.appId
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.appZhname = this.checkList.appZhname
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.appName = this.checkList.appName
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.appVersion = this.checkList.appVersion
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.deployName = this.checkList.deployName
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.deployNamespace = this.checkList.deployNamespace
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.deployStatus = this.checkList.deployStatus
        //   this.serviceDeployOrOutServiceInfo.serviceDeployInfo.tenantId = this.checkList.tenantId
        // } else if(this.detailType === "outService"){
        //   this.serviceDeployOrOutServiceInfo.outServiceInfo.serviceId = this.checkList.serviceId
        //   this.serviceDeployOrOutServiceInfo.outServiceInfo.serviceInterface = this.checkList.serviceInterface
        //   this.serviceDeployOrOutServiceInfo.outServiceInfo.serviceIp = this.checkList.serviceIp
        //   this.serviceDeployOrOutServiceInfo.outServiceInfo.serviceName = this.checkList.serviceName
        //   this.serviceDeployOrOutServiceInfo.outServiceInfo.serviceZhname = this.checkList.serviceZhname
        // }
        // this.serviceDeployOrOutServiceInfo.deployId = this.checkList.appId
        // this.serviceDeployOrOutServiceInfo.appName = this.checkList.appName
        // this.serviceDeployOrOutServiceInfo.appVersion = this.checkList.appVersion
        // this.serviceDeployOrOutServiceInfo.appName = this.checkList.appName
        // this.serviceDeployOrOutServiceInfo.id = this.checkList.id
        console.log("this.checkList", this.checkList);

        this.$emit(
          "addExistInstanceService",
          this.checkList, this.detailType
        )
        this.appVersion = ""
        this.configVisible = false;
        this.value1 = false
        // this.hasConfirmed = true;
      },

      getMaxResourceInfo() {
        this.$tenantManageApi.getMaxResources().then(res => {
          if (res && res.code === 200) {
            this.remainResourceInfo = res.data;
          }
        })
      },
      checkCpu() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest >
          this.remainResourceInfo.cpu
        ) {
          this.$message.error("CPU资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit >
            this.remainResourceInfo.cpu
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      checkMemory() {
        if (
          this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest >
          this.remainResourceInfo.memory
        ) {
          this.$message.error("内存资源值不能超过可用资源");
          return;
        }
        if (this.gvStoreYamlDeployVo.yamlDeployResourceInfo.enableLimit) {
          if (
            this.gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit >
            this.remainResourceInfo.memory
          ) {
            this.$message.error("CPU资源值不能超过可用资源");
          }
        }
      },
      fetchServiceInstancesOnOpen() {
        this.getAllServiceInstance(this.appName)
        this.getAllOutServiceList(this.appInterface)
      },
      checkReplicas() {
        if (this.gvStoreYamlDeployVo.yamlDeployHpaInfo.maxReplicas <= this.gvStoreYamlDeployVo.yamlDeployHpaInfo.minReplicas) {
          this.$message.error("伸缩范围最小值应小于最大值");
          return false;
        }
        return true;
      },
      handleDrawerOpen() {
        // if (this.hasConfirmed && (!this.value1)) {
        //   this.appVersion = ""
        // }
      }
    },
    watch: {
      configVisible(newValue) {
        if (newValue) {
          this.fetchServiceInstancesOnOpen();
        }
      },
    },
    mounted() {
      setTimeout(() => {
        this.getExistPvcList();
        this.getMaxResourceInfo();
      }, 500);
    },
  };
</script>

<style scoped>
</style>
